<template>
  <div class="subcategories" v-if="subcategories.list">
    <!-- <grid-view :cols="3" :lineSpace="15" :v-margin="20" v-if="subcategories.list"> -->
      <div class="item" v-for="(item,index) in subcategories.list" :key="index">
        <a :href="item.link">
            <img v-lazy="item.image" alt="" class="item-img" :key="item.image">
            <div class="item-text">{{item.title}}</div>
        </a>
      </div>
    <!-- </grid-view> -->
  </div>
</template>

<script>
  // import GridView from '../../../components/common/gridView/GridView.vue'
  export default {
    name:"TabContentCategory",
    components:{
      // GridView
    },
    props:{
      subcategories:{
        type:Object,
        default(){
          return {}
        }
      }
    }
  }
</script>

<style scoped>
  .subcategories {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    padding-top: 4px;
    padding-left: 5px;
  }
  .item {
    width: 33.33%;
    text-align: center;
    font-size: 15px;
    font-weight: 550;
    margin-top: 15px;
    padding: 5;
  }

  .item-img {
    width: 80%;
  }

  .item-text {
    margin-top: 18px;
  }
</style>